<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>平台服务列表</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	   $(function(){
	       $('#serverlist').datagrid({  
      				title:'平台服务列表',  
      				iconCls:'icon-save',
      				data:{
                    "total":10,
                     "rows":[
                              {"servername":"应急贷款服务","linkman":"老张","phone":"1231231231","commpanyid":"康华贷款公司","commpanytype":"商务","commpanylevel":"VIP2"
                              ,"createdate":"2022-11-1","flag":"上线","userid":"王五"},
                              {"servername":"应急贷款服务","linkman":"老张","phone":"1231231231","commpanyid":"康华贷款公司","commpanytype":"商务","commpanylevel":"VIP2"
                              ,"createdate":"2022-11-1","flag":"上线","userid":"王五"},
                              {"servername":"应急贷款服务","linkman":"老张","phone":"1231231231","commpanyid":"康华贷款公司","commpanytype":"商务","commpanylevel":"VIP2"
                              ,"createdate":"2022-11-1","flag":"上线","userid":"王五"},
                              {"servername":"应急贷款服务","linkman":"老张","phone":"1231231231","commpanyid":"康华贷款公司","commpanytype":"商务","commpanylevel":"VIP2"
                              ,"createdate":"2022-11-1","flag":"上线","userid":"王五"},
                              {"servername":"应急贷款服务","linkman":"老张","phone":"1231231231","commpanyid":"康华贷款公司","commpanytype":"商务","commpanylevel":"VIP2"
                              ,"createdate":"2022-11-1","flag":"上线","userid":"王五"},
                              {"servername":"应急贷款服务","linkman":"老张","phone":"1231231231","commpanyid":"康华贷款公司","commpanytype":"商务","commpanylevel":"VIP2"
                              ,"createdate":"2022-11-1","flag":"上线","userid":"王五"},
                              {"servername":"应急贷款服务","linkman":"老张","phone":"1231231231","commpanyid":"康华贷款公司","commpanytype":"商务","commpanylevel":"VIP2"
                              ,"createdate":"2022-11-1","flag":"上线","userid":"王五"},
                              {"servername":"应急贷款服务","linkman":"老张","phone":"1231231231","commpanyid":"康华贷款公司","commpanytype":"商务","commpanylevel":"VIP2"
                              ,"createdate":"2022-11-1","flag":"上线","userid":"王五"}
                          ]
                      },  
      				columns:[[  
                					       {field:'servername',title:'服务名称',width:100,align:'center'},  
                					       {field:'linkman',title:'联系人',width:100,align:'center'},  
                					       {field:'phone',title:'联系电话',width:100,align:'center'},
                                 {field:'commpanyid',title:'所属服务商',width:100,align:'center'},
                                 {field:'commpanytype',title:'服务商类型',width:100,align:'center'},
                                 {field:'commpanylevel',title:'服务商等级',width:100,align:'center'},
                                 {field:'userid',title:'发布账户名',width:100,align:'center'},
                                 {field:'createdate',title:'发布日期',width:100,align:'center'},
                                 {field:'flag',title:'状态',width:100,align:'center'},
                                 {field:'cz',title:'操作',width:200,align:'center',formatter:function(val,row){
                                       return "<a href='javascript:showDg();'>查看</a>";
                                 }}
                          ]],  
      				toolbar: "#tooldiv",  
      				pagination: true,
      				singleSelect:true
			});


          
          //初始化修改窗口  
         $('#dg').dialog({
    			    title: '服务详情',
    			    width: 700,
    			    height: 700,
    			    closed: true,
    			    cache: false,
    			    modal: true,
    			    iconCls: 'icon-save'
    			});

         $('#editdg').dialog({
              title: '服务修改',
              width: 700,
              height: 700,
              closed: true,
              cache: false,
              modal: true,
              iconCls: 'icon-save',
              buttons: [{
                    text:'提交',
                    iconCls:'icon-ok',
                    handler:function(){
                       //多选中下拉获取
                       console.log($("#servertype") .combobox("getValues"));
                       console.log($("#serverarea") .combobox("getValues"));
                    }
                },{
                    text:'关闭',
                    handler:function(){
                        alert('cancel');;
                    }
                }]
          });

         //初始化查询按钮
         $("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true })
            .click(function () {
                 alert("开始查询");
            });

         //初始化下拉控件
         $("#servertype").combobox({    
              data:[{
                  id:1,
                  text:"应急贷款"
                },{
                  id:2,
                  text:"期货交易"
                },{
                  id:3,
                  text:"证券交易"
                }],
              width:350,
              label:"服务范围",    
              valueField:'id',    
              textField:'text'   
          });


           $("#serverarea").combobox({    
               data:[{
                  id:1,
                  text:"鼓楼区"
                },{
                  id:2,
                  text:"玄武区"
                },{
                  id:3,
                  text:"秦淮区"
                }],
              label:"服务地区",
              width:350,   
              valueField:'id',    
              textField:'text'   
          });    
   
            
	   });

        //查询弹出方法
       function showDg(){
           $('#dg').dialog("open");
       }

       //打开修改服务界面
       function openeditdg(){
            $("#servertype").combobox("select",1);
            $("#servertype").combobox("select",2);
            $("#servertype").combobox("select",3);

            $("#serverarea").combobox("select",1);
            $("#serverarea").combobox("select",2);
            $("#serverarea").combobox("select",3);
           $('#editdg').dialog("open");
       }
	</script>
</head>
<body>
  <div id="tooldiv">
      <input type="text"  placeholder="请输入服务名"/>
      <select>
          <option value="">请选状态</option>
          <option value="">上线</option>
          <option value="">下线</option>
      </select>
      <a id="submit_search">搜索</a>
      <a  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="openeditdg();">修改</a>
      <a  class="easyui-linkbutton" data-options="iconCls:'icon-remove'" >下线</a>
      <a  class="easyui-linkbutton" data-options="iconCls:'icon-add'" >上线</a>
  </div>
  <table id="serverlist"></table>
    <!--服务详情界面-->
    <div id="dg">
           <div align="center" style="margin-top: 30px">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'服务名称:'" readonly="true" value="应急贷款服务" />
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'联系人:'" readonly="true" value="老张"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'联系电话:'" readonly="true" value="123456"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'所属服务商:'" readonly="true" value="康华贷款公司"/>
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'服务商类型:'" readonly="true" value="商务"/>
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'服务商等级:'" readonly="true" value="VIP2"/>
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'服务范围:'" readonly="true" value="应急贷款,期货交易,证券交易"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'服务地区:'" readonly="true" value="鼓楼区,玄武区,秦淮区"/>
            </div>  
             <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'发布时间:'" readonly="true" value="2021-1-1"/>
            </div> 
             <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'状态:'" readonly="true" value="上线"/>
            </div>
            <div style="margin-bottom:20px">
                <textarea cols="80" rows="5" readonly="true" style="border: 0px;">
这是服务简介这是服务简介这是服务简介这是服务简介这是服务简介这是服务简介这是服务简介这是服务简介这是服务简介这是服务简介这是服务简介这是服务简介这是服务简介这是服务简介
                </textarea>
          </div>
            <div class="imgtab">
              <img src="./images/tx.jpg" alt="" style="width: 100px;height: 100px;">
              <img src="./images/tx.jpg" alt="" style="width: 100px;height: 100px;">
              <img src="./images/tx.jpg" alt="" style="width: 100px;height: 100px;">
              <img src="./images/tx.jpg" alt="" style="width: 100px;height: 100px;">
              <img src="./images/tx.jpg" alt="" style="width: 100px;height: 100px;">
          </div>
        </div>
   </div>
    <!--服务修改界面-->
    <div id="editdg">
           <div align="center" style="margin-top: 30px">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'服务名称:'"  />
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'联系人:'" />
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'联系电话:'" />
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'所属服务商:'" />
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'服务商类型:'" />
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'服务商等级:'" />
            </div> 
            <div style="margin-bottom:20px">
                <select id="servertype" multiple="multiple"></select>
            </div>
            <div style="margin-bottom:20px">
                <select id="serverarea" multiple="multiple"></select>
            </div>
            <div style="margin-bottom:20px">
                <textarea cols="80" rows="5"></textarea>
            </div> 
             <div style="margin-bottom:20px">
                 <input type="file" multiple="multiple" />
            </div>
        </div>
   </div>
</body>
</html>